<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>节点的操作</title>
  <style>
    .child {
      width: 100px;
      height: 50px;
      border: 1px solid red;
    }
  </style>
  <script>
    window.onload = function () {
      // 往parent里面放孩子节点
      // 1、找到parent节点
      // 2、找到孩子节点
      // 3、放进去
      var parent = document.getElementsByClassName('parent')[0];
      // console.log(parent);
      // 新建一个孩子节点
      var newChild = document.createElement('div');
      // 添加内部文本
      // newChild.innerText = 'hello'
      // 内部添加内容
      newChild.innerHTML = `<div>newChild</div>`
      // console.log(newChild);
      // 将新建的节点追加到父节点上
      // parent.appendChild(newChild)
      // var two = parent.children[1];
      var two = document.getElementsByClassName('child')[1];
      // console.log(two);
      // parent.insertBefore(newChild, two)
      // parent.removeChild(two)
      parent.replaceChild(newChild, two)


    }
  </script>
</head>

<body>
  <div class="parent">
    <div class="child">one</div>
    <div class="child">two</div>
    <div class="child">three</div>
  </div>
</body>

</html>